<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="8">
        template：
        <el-input
          v-model="docInfo.code.template"
          v-bind="tempProps"
        ></el-input>
      </el-col>
      <el-col :span="8">
        setup：
        <el-input
          v-model="docInfo.code.js"
          v-bind="jsProps"
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-button type="" @click="start">运行</el-button>
        <run-code
          v-if="isRun"
          :code="docInfo.code"
        >
        </run-code>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { ref } from 'vue'
  import { ElInput, ElButton, ElRow, ElCol } from 'element-plus'
  import runCode from './run.vue'

  const jsProps = {
    // autosize: true,
    rows: 10,
    type: "textarea",
    placeholder: "const foo = ref('测试') \nreturn {\n foo \n}"
  }
  
  const tempProps = {
    // autosize: true,
    rows: 10,
    type: "textarea",
    placeholder: "可以写 template "
  }


</script>

<script setup>

  const props = defineProps({
    docInfo: Object
  })

  // 控制刷新运行代码
  const isRun = ref(true)

  const start = () => {
    isRun.value = false
    setTimeout(() => {
      isRun.value = true
    }, 200)
  }

</script>